﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="../../css/global/public.css" />
	<link rel="stylesheet" type="text/css" href="../../css/global/mui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/inquiry-service.css" />
	<script type="text/javascript" src="../../js/lib/mui.min.js"></script>
	<script type="text/javascript" src="../../js/lib/mui.zoom.js"></script>
	<script type="text/javascript" src="../../js/lib/mui.previewimage.js"></script>
<title>问诊服务</title>
</head>
<body>
<div class="top-prompt bg_blue textC is_chat_off">问诊交流</div>
<div class="top-prompt bg_gray textC is_chat_no" style="display:none">问诊结束</div>
<div class="service-dialogue">
	<ul class="font2" id="im_content">
	</ul>
	<div class="prompt-dilog" style="display:none;"><span>医生回复仅为建议，具体治疗请前往医院进行</span></div>
</div>
<div class="service-footer">
	<div class="write">
		<input type="text" placeholder="请输入文字描述病情" id="msg">
		<div class="more"><img src="../../images/more.png"></div>
		<button id="oksent">发送</button>
	</div>
	<div class="function animat">
		<ul>
			<li id="album">
				<input type="file" accept="image/*" class="photos fileToUpload" name="fileToUpload" id="fileToUpload" data-id=1 />
				<img src="../../images/function1.png" />
				<p>相册</p>
			</li>
			<li id="photograph">
				<input type="file" accept="image/*" class="photos fileToUpload" name="fileToUpload" id="fileToUpload2" data-id=2 />
				<img src="../../images/function2.png" />
				<p>拍照</p>
			</li>
		</ul>
	</div>
</div>
</body>
</html>
<!--公共方法-->
<script type="text/javascript" src="../../js/module/utilModule.js"></script>
<!--配置信息-->
<script type="text/javascript" src="../../js/common/config.js"></script>
<script type="text/javascript" src="../../js/lib/zepto.min.js"></script>
<!--公共布局-->
<script type="text/javascript" src="../../js/common/common.js"></script>
<!--IM-->
<script language='javascript' src='../../js/lib/IM/webim.config.js'></script>
<script language='javascript' src='../../js/lib/IM/strophe-1.2.8.min.js'></script>
<script language='javascript' src='../../js/lib/IM/websdk-1.4.12.js'></script>
<script type="text/javascript" src="../../js/lib/IM/ImUtilModulepoor.js"></script>

<!--自定义模块-->
<!-- <script type="text/javascript" src="js/module/homepageModule.js" ></script>
<script type="text/javascript" src="js/homepage/homepage.js" ></script> -->
<script type="text/javascript" src="../../js/common/upload.js"></script>
<script>
	mui.previewImage();
	/*选取相册js*/
	$(function() {
		var $open = true;
		$(".service-footer .more").click(function() {
			if($open) {
				$(".service-footer .function").fadeIn();
			} else {
				$(".service-footer .function").fadeOut();
			}
			$open = !$open;
		});

		// 键盘遮罩
		var u = navigator.userAgent,
			interval;
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		console.log(isiOS);
		console.log(u);
		if(isiOS) {
			$('#msg').focus(function() {
				interval = setInterval(function() {
					scrollToEnd();
				}, 300);
			});
			//消息框失去焦点
			$('#msg').blur(function() {
				clearInterval(interval);
			});
			//滚动到底部
			function scrollToEnd() {
				document.body.scrollTop = document.body.scrollHeight;
			}
		}

		//获取 doctor_im
		var usernameIM = utilModule.getQueryString("usernameIM") ? utilModule.getQueryString("usernameIM") : mui.alert("错误", '提示');
		
		//获取医生id
		var doctorid = utilModule.getQueryString("doctorid") ? utilModule.getQueryString("doctorid") : mui.alert("未获取到医生错误", '提示');
		//获取医生 信息
		var doctor_info = new Object();
		utilModule.post({
			url: "doctor/doctorDetail",
			needJson: false,
			data: {
				"doctorId": doctorid
			},
			async: false,
			success: function(response) {
				doctor_info = response.doctor;
			},
			false: function(response) {
				mui.alert("未获取到医生错误", '提示');
				return false;
			}
		});
		console.log(doctor_info);
		if($.isEmptyObject(doctor_info)) {
			mui.alert("未获取到医生信息", "提示");
			return false;
		}
		
		//获取 聊天记录
		var chatlist = JSON.parse(utilModule.getStorage("chat_list1"));

		// IM连接
		var conn = ImUtilModule.conn();
		// IM 登录
		ImUtilModule.login(conn);
		// 开启监听
		ImUtilModule.listen(conn);
		//发送图片
		$(".fileToUpload").on("change", function() {
			if($(this).data("id") == 1) {
				ImUtilModule.sendPrivateImg(conn, usernameIM, 1);
			} else if($(this).data("id") == 2) {
				ImUtilModule.sendPrivateImg(conn, usernameIM, 2);
			} else {
				mui.alert("发送错误", '提示');
				return false;
			}
		});
		//绑定发送消息按钮
		$("#oksent").on("click", function() {
			var chatlist = JSON.parse(utilModule.getStorage("chat_list1"));
			
			var contact_msg = $("#msg").val();
			if(contact_msg == "") {
				mui.alert("请填写内容再发送", '提示');
				return false;
			}
			var html = '<li class="pullRight">' +
				'<div class="dialogue2">' +
				contact_msg +
				'</div>' +
				'</li>'
			$("#im_content").append(html);
			mui.scrollTo(10000, 500);
			$("#msg").val("");
			//发送环信
			ImUtilModule.singleChat(conn, usernameIM, contact_msg);
			var arr_message = {
				[usernameIM]: [{
					"doctorid": doctorid,
					"usernameIM": usernameIM,
					"realname": doctor_info.realname,
					"time": new Date().getTime(),
					"avatar": doctor_info.avatar,
					"msg": contact_msg,
					"type_role": 1,
				}]
			}
			
			//获取 聊天记录
			var chatlist = JSON.parse(utilModule.getStorage("chat_list1"));
			if(chatlist != null && chatlist != "undefined" && chatlist != '' && chatlist.length != 0) {
				if(chatlist[usernameIM]) {
					chatlist[usernameIM].push(arr_message[usernameIM][0]);
				} else {
					chatlist = $.extend({}, chatlist, arr_message);
				}
				utilModule.removeStorage("chat_list1");
				utilModule.setStorage("chat_list1", JSON.stringify(chatlist));
			} else {
					utilModule.setStorage("chat_list1", JSON.stringify(arr_message));
			}
		});
		//load 聊天记录
		var html = "";
		if(chatlist != null && chatlist != "undefined" && chatlist != '' && chatlist.length != 0 && doctor_info != null) {
			$.each(chatlist[usernameIM], function(index, obj) {
				if(obj.type_role == 2) { // 2医生,3处方单,1患者,4患者普通图片,5医生图片
					html += '<li class="pullLeft">' +
						'<div class="doctorImg"><img src="' + doctor_info.avatar + '" alt=""></div>' +
						'<div class="dialogue">' +
						obj.msg +
						'</div>' +
						'</li>'
				} else if(obj.type_role == 1) {
					html += '<li class="pullRight">' +
						'<div class="dialogue2">' +
						obj.msg +
						'</div>' +
						'</li>'
				} else if(obj.type_role == 3) {
					html += '<li class="pullLeft">' +
						'<div class="doctorImg"><img src="' + doctor_info.avatar + '" alt=""></div>' +
						'<div class="picture3">' +
						'<a class="inquiry-img" href="../prescription/prescription-details.html?orderid=' + obj.chufang_id + '" onclick="window.location.href=&quot../prescription/prescription-details.html?orderid=' + obj.chufang_id + '&quot"><img src="http://xinyuyl.oss-cn-beijing.aliyuncs.com/app/doctor/cfd.png" alt="" width=210px height=60px ></a>' +
						'</div>' +
						'</li>'
				} else if(obj.type_role == 4) {
					html += '<li class="pullRight">' +
						'<div class="picture"><img src="' +
						obj.msg +
						'" alt="" data-preview-src="" data-preview-group="1" ></div>' +
						'</li>'
				} else if(obj.type_role == 5) {
					html += '<li class="pullLeft">' +
						'<div class="doctorImg"><img src="' + doctor_info.avatar + '" alt=""></div>' +
						'<div class="picture2">' +
						'<img src="' + obj.img + '" alt="" data-preview-src="" data-preview-group="1" >' +
						'</div>' +
						'</li>'
				}
			});
		}
	$("#im_content").append(html);
	mui.scrollTo(10000, 500);
	});
</script>